<!-- 上传文件demo -->
<template>
  <div class=''>
    <!--  -->
    <el-form size="mini"
             :inline="true"
             label-width="75px"
             label-position="top">
      <el-row :gutter="10">
        <el-col :span="19"
                style="background: green; padding-top:10px">
          <el-row :gutter="10">
            <el-col>
              <el-form-item label="姓名"
                            prop="name">
                <el-input v-model="dataForm.name"
                          placeholder="姓名"></el-input>
              </el-form-item>
              <el-form-item label="年龄"
                            prop="age">
                <el-input v-model="dataForm.age"
                          placeholder="年龄"
                          maxlength="3"
                          show-word-limit></el-input>
              </el-form-item>
              <el-form-item label="性别"
                            prop="sex">
                <template>
                  <el-radio-group v-model="dataForm.sex">
                    <el-radio-button :label="1">男</el-radio-button>
                    <el-radio-button :label="0">女</el-radio-button>
                  </el-radio-group>
                </template>
              </el-form-item>
              <el-form-item label="身份证号"
                            prop="idcard">
                <el-input v-model="dataForm.idcard"
                          placeholder="身份证号"
                          maxlength="18"
                          show-word-limit></el-input>
              </el-form-item>
              <el-form-item label="出生日期"
                            prop="birthday">
                <el-date-picker v-model="dataForm.birthday"
                                type="date"
                                placeholder="选择日期"
                                style="min-width: 130px; max-width: 180px;"></el-date-picker>
              </el-form-item>
              <el-form-item label="联系电话"
                            prop="telphone">
                <el-input v-model="dataForm.telphone"
                          placeholder="联系电话"
                          maxlength="11"
                          show-word-limit></el-input>
              </el-form-item>
              <el-form-item label="籍贯"
                            prop="hometown">
                <el-select v-model="dataForm.hometown">
                  <el-option v-for="item in selectOps.hometown"
                             :key="item.id"
                             :label="item.name"
                             :value="item.id"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="居住地址"
                            prop="address">
                <el-input v-model="dataForm.address"
                          placeholder="居住地址"></el-input>
              </el-form-item>
              <el-form-item label="学历"
                            prop="education">
                <el-select v-model="dataForm.education">
                  <el-option v-for="item in selectOps.education"
                             :key="item.id"
                             :label="item.name"
                             :value="item.id"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="职业"
                            prop="job">
                <el-input v-model="dataForm.job"
                          placeholder="职业"></el-input>
              </el-form-item>
              <el-form-item label="有无保险"
                            prop="insurance">
                <!-- <el-input v-model="dataForm.insurance" placeholder="有无保险 0：无；1：有；"></el-input> -->
                <el-select v-model="dataForm.insurance">
                  <el-option v-for="item in selectOps.insurance"
                             :key="item.id"
                             :label="item.name"
                             :value="item.id"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="兴趣爱好"
                            prop="hobby">
                <el-input v-model="dataForm.hobby"
                          placeholder="兴趣爱好"></el-input>
              </el-form-item>
              <el-form-item label="婚姻状况"
                            prop="marriage">
                <el-select v-model="dataForm.marriage">
                  <el-option v-for="item in selectOps.marriage"
                             :key="item.id"
                             :label="item.name"
                             :value="item.id"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="婚姻状况"
                            prop="marriage">
                <el-select v-model="dataForm.marriage">
                  <el-option v-for="item in selectOps.marriage"
                             :key="item.id"
                             :label="item.name"
                             :value="item.id"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="婚姻状况"
                            prop="marriage">
                <el-select v-model="dataForm.marriage">
                  <el-option v-for="item in selectOps.marriage"
                             :key="item.id"
                             :label="item.name"
                             :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="5"
                style="background: red; ">
          <el-upload class="avatar-uploader"
                     action="http://localhost:88/api/member/upload/uploadfile"
                     :show-file-list="false"
                     :on-success="handleAvatarSuccess"
                     :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl"
                 :src="imageUrl"
                 class="avatar">
            <i v-else
               class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-col>
      </el-row>

    </el-form>

  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';

export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    // 这里存放数据
    return {
      imageUrl: '',
      // 中华人民共和国行政区划数据
      china: {
        province: [], // 省份
        city: [], // 城市
        area: [] // 区县
      },
      // value: [],
      districts: [],  // 地区数组
      // 级连下拉框可选项设置
      districtProps: {
        label: 'name',  // 显示的值
        value: 'code',  // 选择的值
        children: 'children'  // 子节点
      },
      selectOps: {
        sex: [
          { id: 1, name: '男' },
          { id: 0, name: '女' }
        ],
        // 学历
        education: [
          { id: 1, name: '文盲' },
          { id: 2, name: '小学' },
          { id: 3, name: '初中' },
          { id: 4, name: '高中/技校/中专' },
          { id: 5, name: '大学专科以上' },
          { id: 6, name: '不详' }
        ],
        // 有无保险
        insurance: [
          { id: 1, name: '有' },
          { id: 0, name: '无' }
        ],
        // 婚姻状况
        marriage: [
          { id: 1, name: '未婚' },
          { id: 2, name: '已婚' },
          { id: 3, name: '丧偶' },
          { id: 4, name: '离婚' },
          { id: 5, name: '未知' }
        ],
        // 居住情况
        reside: [
          { id: 1, name: '独居' },
          { id: 2, name: '与子女居住' },
          { id: 3, name: '夫妻同居' },
          { id: 4, name: '其他' }
        ],
        // 籍贯
        hometown: [
          { id: 1, name: '汉族' },
          { id: 2, name: '少数民族' }
        ]
      },
      dataForm: {
        id: 0,
        name: '',
        age: '',
        sex: '',
        avatar: '',
        telphone: '',
        idcard: '',
        birthday: '',
        address: '',
        hometown: '',
        job: '',
        education: '',
        insurance: '',
        hobby: '',
        health: '',
        marriage: '',
        reside: '',
        provincecode: '',
        citycode: '',
        areacode: '',
        districtArr: ''
      },
      dataRule: {
        name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
        age: [{ required: true, message: '年龄不能为空', trigger: 'blur' }],
        sex: [
          {
            required: true,
            message: '性别不能为空',
            trigger: 'blur'
          }
        ],
        avatar: [{ required: true, message: '头像不能为空', trigger: 'blur' }],
        telphone: [
          { required: true, message: '联系电话不能为空', trigger: 'blur' }
        ],
        idcard: [
          { required: true, message: '身份证号不能为空', trigger: 'blur' }
        ],
        birthday: [
          { required: true, message: '出生日期不能为空', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '居住地址不能为空', trigger: 'blur' }
        ],
        hometown: [
          {
            required: true,
            message: '籍贯不能为空',
            trigger: 'blur'
          }
        ],
        job: [{ required: true, message: '职业不能为空', trigger: 'blur' }],
        education: [
          {
            required: true,
            message: '学历不能为空',
            trigger: 'blur'
          }
        ],
        insurance: [
          {
            required: true,
            message: '有无保险不能为空',
            trigger: 'blur'
          }
        ],
        hobby: [
          { required: true, message: '兴趣爱好不能为空', trigger: 'blur' }
        ],
        health: [
          { required: true, message: '健康状况不能为空', trigger: 'blur' }
        ],
        marriage: [
          {
            required: true,
            message: '婚姻状况不能为空',
            trigger: 'blur'
          }
        ],
        reside: [
          {
            required: true,
            message: '居住情况不能为空',
            trigger: 'blur'
          }
        ],
        provicecode: [
          { required: true, message: '省份编码不能为空', trigger: 'blur' }
        ],
        citycode: [
          { required: true, message: '城市编码不能为空', trigger: 'blur' }
        ],
        areacode: [
          { required: true, message: '区域编码不能为空', trigger: 'blur' }
        ]
      }

    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    handleAvatarSuccess (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  },
  beforeCreate () { }, // 生命周期 - 创建之前
  beforeMount () { }, // 生命周期 - 挂载之前
  beforeUpdate () { }, // 生命周期 - 更新之前
  updated () { }, // 生命周期 - 更新之后
  beforeDestroy () { }, // 生命周期 - 销毁之前
  destroyed () { }, // 生命周期 - 销毁完成
  activated () { } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped>
div >>> .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

div >>> .avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>